import { BasicColumn, BasicTable, FormSchema, TableAction, useTable } from "@/components/Table";
import { useTranslation } from "react-i18next";
import { formatDate } from "@/utils/util";
import { IconEnum } from "@/enums/appEnum";
import { InvoiceLnformationApi } from "@/api/statisticalReport/InvoiceLnformation";
import CreateAndUpdata from "./components/createAndUpdata";
import { useDrawer } from "@/components/Drawer";

const index = () => {
	const { t } = useTranslation();
	const en_vi = "statisticalReport.InvoiceLnformation";
	const schemas: FormSchema[] = [
		{
			label: t(`${en_vi}.invoiceCode`),
			field: "invoiceNo",
			component: "Input"
		},
		{
			label: t(`${en_vi}.invoiceType`),
			field: "invoiceType",
			component: "Select",
			componentProps: {
				options: [
					{
						label: t(`${en_vi}.specialVATInvoice`),
						value: "1"
					},
					{
						label: t(`${en_vi}.generalInvoice`),
						value: "2"
					}
				]
			}
		},
		{
			label: t(`erp.warehouses.status`),
			field: "status",
			component: "Select",
			componentProps: {
				options: [
					{
						label: t(`${en_vi}.issued`),
						value: "1"
					},
					{
						label: t(`${en_vi}.writtenOff`),
						value: "2"
					},
					{
						label: t(`${en_vi}.voided`),
						value: "3"
					}
				]
			}
		}
	];
	const columns: BasicColumn[] = [
		{
			title: t(`${en_vi}.invoiceCode`),
			dataIndex: "invoiceNo"
		},
		{
			title: t(`${en_vi}.invoiceType`),
			dataIndex: "invoiceType",
			render: (invoiceType: any) => {
				if (invoiceType == "1") return t(`${en_vi}.specialVATInvoice`);
				if (invoiceType == "2") return t(`${en_vi}.generalInvoice`);
			}
		},
		{
			title: t(`${en_vi}.buyerName`),
			dataIndex: "buyerName"
		},
		{
			title: t(`${en_vi}.sellerName`),
			dataIndex: "sellerName"
		},
		{
			title: t(`${en_vi}.totalAmount`),
			dataIndex: "totalAmount"
		},
		{
			title: t(`${en_vi}.taxAmount`),
			dataIndex: "taxAmount"
		},
		{
			title: t(`${en_vi}.remarks`),
			dataIndex: "remarks"
		},
		{
			title: t(`erp.warehouses.status`),
			dataIndex: "status",
			render: (status: any) => {
				if (status == "1") return t(`${en_vi}.issued`);
				if (status == "2") return t(`${en_vi}.writtenOff`);
				if (status == "3") return t(`${en_vi}.voided`);
			}
		},
		{
			title: t(`${en_vi}.issueTime`),
			dataIndex: "updatedTime",
			render: (time: any) => formatDate(new Date(time))
		},
		{
			title: t(`erp.invtDept.creationTime`),
			dataIndex: "createdTime",
			render: (time: any) => formatDate(new Date(time))
		},
		{
			title: t(`erp.warehouseGroupType.operations`),
			fixed: "right",
			width: 200,
			render: (_: any, record: any) => (
				<TableAction
					actions={[
						{
							icon: IconEnum.EDIT,
							label: t(`${en_vi}.issueInvoice`),
							disabled: record.status == "1",
							onClick: invoicing.bind(null, record)
						}
					]}
				></TableAction>
			)
		}
	];
	const [registerTable, { reload }] = useTable({
		api: InvoiceLnformationApi.invoiceInfoList,
		columns,
		useSearchForm: true,
		formConfig: {
			labelWidth: 120,
			schemas,
			showActionButtonGroup: true,
			showAdvancedButton: false,
			baseColProps: { span: 6 },
			actionColOptions: { span: 24 }
		},
		bordered: true
	});
	const [registerDrawer, { openDrawer }] = useDrawer();

	const invoicing = async (record: any) => {
		console.log(record);
		openDrawer(true, {
			record
		});
		reload();
	};
	return (
		<div>
			<div className="page-content">
				<BasicTable register={registerTable}></BasicTable>
			</div>
			<CreateAndUpdata register={registerDrawer}></CreateAndUpdata>
		</div>
	);
};

export default index;
